<form data-amplify-form (submit)="onSubmit($event)" (input)="onInput($event)">
  <fieldset
    class="amplify-flex amplify-authenticator__column"
    data-amplify-fieldset
    [disabled]="authenticator.isPending"
  >
    <amplify-slot name="setup-totp-header" [context]="context">
      <h3 class="amplify-heading amplify-heading--3">{{ this.headerText }}</h3>
    </amplify-slot>
    <p *ngIf="!qrCodeSource">Loading...</p>
    <img
      *ngIf="qrCodeSource"
      [src]="qrCodeSource"
      alt="qr code"
      data-amplify-qrcode
      width="228"
      height="228"
    />
    <div class="amplify-flex" data-amplify-copy>
      <div>{{ totpSecretCode }}</div>
      <div data-amplify-copy-svg (click)="copyText()">
        <div data-amplify-copy-tooltip>{{ copyTextLabel }}</div>
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM15 5H8C6.9 5 6.01 5.9 6.01 7L6 21C6 22.1 6.89 23 7.99 23H19C20.1 23 21 22.1 21 21V11L15 5ZM8 21V7H14V12H19V21H8Z"
          />
        </svg>
      </div>
    </div>

    <amplify-base-form-fields route="setupTotp"></amplify-base-form-fields>
    <button
      amplify-button
      variation="primary"
      fullWidth="true"
      type="submit"
      [isDisabled]="authenticator.isPending"
    >
      {{ confirmText }}
    </button>
    <button
      amplify-button
      size="small"
      variation="link"
      fontWeight="normal"
      fullWidth="true"
      (click)="authenticator.toSignIn()"
    >
      {{ backToSignInText }}
    </button>
    <amplify-error *ngIf="authenticator.error">
      {{ authenticator.error }}
    </amplify-error>
  </fieldset>
  <amplify-slot name="setup-totp-footer" [context]="context"> </amplify-slot>
</form>
